<script setup lang="ts">
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { init, graphic } from '../echarts-utils.ts';
import type { ECOption } from '../echarts-utils.ts';

const chart = ref<HTMLElement>();

// 年度游客总量对比
// 2021 2022 2023 12个月的数据随机不一样
function createData() {
  const data = [];
  for (let i = 1; i <= 12; i++) {
    data.push(Math.floor(Math.random() * 1000));
  }
  return data;
}

function initChart() {
  const myChart = init(chart.value);
  myChart.setOption({
    legend: {
      data: ['2021年', '2022年', '2023年'],
      icon: 'roundRect'
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      boundaryGap: false,
      axisTick: { show: false },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value',
      name: '（人数）',
      boundaryGap: false,
      splitLine: { show: false },
      axisLine: { show: true }
    },
    series: [
      {
        type: 'line',
        name: '2021年',
        data: createData(),
        smooth: true,
        lineStyle: { width: 0 },
        showSymbol: false,
        areaStyle: {
          opacity: 0.6
          // color: new graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: 'rgba(0, 122, 254, 0.6)' },
          //   { offset: 1, color: 'rgba(0, 122, 254, 0)' }
          // ])
        }
      },
      {
        type: 'line',
        data: createData(),
        name: '2022年',
        smooth: true,
        lineStyle: { width: 0 },
        showSymbol: false,
        areaStyle: {
          opacity: 0.6
          // color: new graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: 'rgba(255, 102, 0, 0.6)' },
          //   { offset: 1, color: 'rgba(255, 102, 0, 0)' }
          // ])
        }
      },
      {
        type: 'line',
        name: '2023年',
        data: createData(),
        smooth: true,
        lineStyle: { width: 0 },
        showSymbol: false,
        areaStyle: {
          opacity: 0.6
          // color: new graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: 'rgba(255, 105, 122, 0.6)' },
          //   { offset: 1, color: 'rgba(255, 105, 122, 0)' }
          // ])
        }
      }
    ],
    grid: {
      left: 0,
      right: '3%',
      bottom: 0,
      top: '18%',
      containLabel: true // 包含刻度线在内
    }
  } as ECOption);
}

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="cb fit column">
    <Title title="年度游客总量对比"></Title>
    <div class="col chart" ref="chart"></div>
  </div>
</template>

<style scoped lang="scss">
.cb {
  background: url(../images/dataScreen-main-rc.png) no-repeat;
  .chart {
    margin-top: 20px;
  }
}
</style>
